<@override name="contest_content">
<div class="row" id="problem-status">
  <div class="span4">
    <h4>Statistics</h4>
    <table id="problem-status" class="table table-hover table-condensed table-bordered">
      <tbody>
      <tr>
        <td>Total Submissions</td>
        <td><a href="contest/status/${cid!}?pid=${id!}">${problem.submission!}</a></td>
      </tr>
      <tr>
        <td>Users (Submitted)</td>
        <td>${problem.submitUser}</td>
      </tr>
      <tr>
        <td>Users (Solved)</td>
        <td>${problem.solved}</td>
      </tr>
        <#if resultList??>
          <#list resultList as Result>
          <tr>
            <td id="${Result.name!}">${Result.longName!}</td>
            <td><a href="contest/status/${cid!}?pid=${id!}&result=${Result.result!}">${Result.count!}</a></td>
          </tr>
          </#list>
        </#if>
      </tbody>
    </table>
    <div id="container" style="min-width: 350px; height: 350px; margin: 0 auto"></div>
  </div>

  <div class="span8" id="ajax-container">
    <h4>
      Best solutions of Problem <a href="contest/problem/${cid!}-${id}" data-toggle="tooltip"
                                   title="${problem.title!}">${cid!}-${id}</a>
    </h4>
    <div id="lang" class="pull-left btn-group ajax-loader">
      <a class="btn btn-info ajax-loader" type="a" data-pid="${problem.pid}" data-id="0">All</a>
      <#if program_languages??>
        <#list program_languages.keySet() as key>
          <a class="btn btn-info ajax-loader" type="a" data-pid="${problem.pid}"
             data-id="${key}">${program_languages.get(key)!}</a>
        </#list>
      </#if>
    </div>
    <div class="pull-right">
      <span id="pages" class="badge badge-info"></span>
      <span id="records" class="badge badge-info"></span>
    </div>
    <table id="problem-status" class="table table-hover table-condensed">
      <thead>
      <tr>
        <th>Rank</th>
        <th>Run ID</th>
        <th>User</th>
        <th>Time</th>
        <th>Memory</th>
        <th>Language</th>
        <th>Code Length</th>
        <th>Submit Time</th>
      </tr>
      </thead>
      <tbody id="problem-status-tbody">
      </tbody>
    </table>
    <div id="page" class="pagination pagination-centered ajax-loader"></div>
  </div>
</div>

<table class="hidden">
  <tbody id="problem-status-row">
  <tr>
    <td class="id">[id]</td>
    <td class="sid">[sid]</td>
    <td class="user"><a href="user/profile/[name]">[name]</a></td>
    <td class="time">[time] MS</td>
    <td class="memory">[memory] KB</td>
    <td class="language">[language]</td>
    <td class="codeLen">[len] B</td>
    <td class="ctime">[ctime]</td>
  </tr>
  </tbody>
</table>
</@override>

<@override name="scripts">
  <#if oj_style != "slate">
  <link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
  <script src="assets/tablecloth/js/jquery.metadata.js"></script>
  <script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
  <script src="assets/tablecloth/js/jquery.tablecloth.js"></script>
  </#if>
  <#if (problem.submission>0)>
  <script src="assets/Highcharts/js/highcharts.js"></script>
  <script src="assets/Highcharts/js/modules/exporting.js"></script>
  </#if>
<script type="text/javascript">
  $(function () {
    var chart;
    $(document).ready(function () {
      <#if (problem.submission>0)>
        // Build the chart
        $('#container').highcharts({
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
          },
          title: {
            text: '<a href="contest/problem/${cid!}-${id}" title="view the problem">Problem ${cid!}-${id} Statistics</a>'
          },
          subtitle: {
            text: 'Power OJ'
          },
          tooltip: {},
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: false
              },
              showInLegend: true
            }
          },
          series: [{
            type: 'pie',
            name: 'Count',
            data: [
              <#if resultList??>
                <#list resultList as Result>
                  {
                    name: '${Result.longName!}',
                    color: $('td#${Result.name!}').css('color'),
                    y: ${Result.count!}
                  },
                </#list>
              </#if>]
          }]
        });
      </#if>
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function () {
    function problemStatus(url) {
      $.getJSON(url, function (data) {
        var html = '';
        var temp = $('#problem-status-row').html();
        var solutionList = data.solutionList;
        var pageNumber = parseInt(solutionList.pageNumber);
        var pageSize = parseInt(solutionList.pageSize);
        var pSize = parseInt(pageSize);
        var totalPage = parseInt(solutionList.totalPage);
        for (var i in solutionList.list) {
          var solution = data.solutionList.list[i];
          var language = solution.language;
          if (data.user && data.user.uid && (data.adminUser || data.user.uid == solution.uid))
            language = '<a href="contest/code/' + ${cid!} +'-' + solution.sid + '" target="_blank" title="show source code">' + solution.language + '</a>';

          html += temp.replace(/\[id\]/g, (parseInt(i) + 1 + (pageNumber - 1) * pageSize))
                  .replace(/\[sid\]/g, solution.sid)
                  .replace(/\[name\]/g, solution.name || "Guest")
                  .replace(/\[time\]/g, solution.time || 0)
                  .replace(/\[memory\]/g, solution.memory || 0)
                  .replace(/\[language\]/g, language)
                  .replace(/\[len\]/g, solution.codeLen || 0)
                  .replace(/\[ctime\]/g, parseTimestamp(solution.ctime));
        }

        $('#problem-status-tbody').html(html);
        $('span#pages').html(pageNumber + '/' + totalPage + ' Pages');
        $('span#records').html(solutionList.totalRow + ' Records');
        $('a.ajax-loader').removeClass('active');
        var language = data.language == null ? '' : data.language;
        $('a.ajax-loader[data-id=' + language + ']').addClass('active');
        $('div#page').html(makeProblemStatusPage(pageNumber, totalPage));
      });
    }

    function makeProblemStatusPage(pageNumber, totalPage) {
      var prev = '';
      var html = '';
      if (pageNumber > 1) {
        prev = '<li><a class="btn-link" data-page="' + (pageNumber - 1) + '">Prev</a></li>';
      }
      var next = '';
      if (pageNumber < totalPage) {
        next = '<li><a class="btn-link" data-page="' + (pageNumber + 1) + '">Next</a></li>';
      }

      html = '<ul><li class="' + (pageNumber == 1 ? 'disabled' : '') + '"><a class="btn-link" data-page="1">&lt;&lt;</a></li>' + prev;

      var start = pageNumber - 3;
      var end = pageNumber + 3;
      if (start < 1) {
        end = end - start + 1;
        start = 1;
      }
      if (end > totalPage) {
        start = start - (end - totalPage) - 1;
        if (start < 1)
          start = 1;
        end = totalPage;
      }
      if (end < start)
        end = start;

      for (i = start; i <= end; ++i) {
        html += '<li class="' + (pageNumber == i ? 'disabled' : '') + '"><a class="btn-link" data-page="' + i + '">' + i + '</a></li>';
      }

      html += next + '<li class="' + (pageNumber >= totalPage ? 'disabled' : '') + '"><a class="btn-link" data-page="' + totalPage + '">&gt;&gt;</a></li></ul>';
      return html;
    }

    $('div.ajax-loader').delegate('a', 'click', function () {
      if ($(this).parent().hasClass('disabled'))
        return;

      var lang = $(this).attr('data-id') || $('.ajax-loader.active').attr('data-id') || '';
      var page = $(this).attr('data-page') || 1;

      var url = '/api/contest/problemStatus/${cid!}-${id}?language=' + lang + '&p=' + page;
      problemStatus(url);
    });

    var url = '/api/contest/problemStatus/${cid!}-${id}';
    problemStatus(url);

    <#if oj_style != "slate">
      $("table#problem-status").tablecloth({
        theme: "stats",
        condensed: true,
        sortable: false,
        striped: true,
        clean: true
      });
    </#if>
  });
</script>
</@override>
<@extends name="_layout.html" />
